<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>霹雳15 VS 阵风</title>
    <style>
        #container {
            position: relative;
            width: 100%;
            height: 700px;
            border: 1px solid black;
            overflow: hidden;
        }

        .object {
            position: absolute;
            width: 190px;
            height: 210px;
        }

        #missile {
            background: url('missile.png') no-repeat;
            left: 0;
            top: 256px;
        }

        #plane {
            background: url('plane.png') no-repeat;
            right: 0;
            top: 175px;
        }

        #explosion {
            background: url('explosion.png') no-repeat;
            display: none;
            top: 80px;
        }
    </style>
</head>

<body>
    <div style="display: flex; flex-direction: column; align-items: center;">
        <h1 style="width: 100%; text-align: center;">霹雳15 VS 阵风</h1>
        <button style="width: 10%;margin-bottom: 10px;" onclick="start()">开始</button>
    </div>
    <div id="container">
        <div id="missile" class="object"></div>
        <div id="plane" class="object"></div>
        <div id="explosion" class="object"></div>
    </div>

    <script>
        var container = document.getElementById('container');
        var missile = document.getElementById('missile');
        var plane = document.getElementById('plane');
        var explosion = document.getElementById('explosion');
        let missileLeft = 0;
        let planeRight = 0;

        function moveAndCheckCollision() {
            var speedMissile = 25;
            var speedPlane = 4;

            missileLeft += speedMissile;
            planeRight += speedPlane;

            missile.style.left = missileLeft + 'px';
            plane.style.right = planeRight + 'px';
         
            if (missileLeft + missile.offsetWidth >= (container.offsetWidth - planeRight) - 100) {
                clearInterval(animationInterval);
                missile.style.display = 'none';
                plane.style.display = 'none';

                explosion.style.display = 'block';
                explosion.style.left = (missileLeft + 35) + 'px';
                explosion.style.top = 220 + 'px';
            }
        }

        function start() {
            var flag = confirm("发现阵风，是否攻击，请指示：");
            if (flag) {
                var audio = new Audio('explosion.mp3');
                audio.play();
                missile.style.display = 'block';
                plane.style.display = 'block';
                explosion.style.display = 'none';
                missileLeft = 0;
                planeRight = 0;
                missile.style.left = missileLeft + 'px';
                plane.style.right = planeRight + 'px';
                animationInterval = setInterval(moveAndCheckCollision, 30);
            }
        }

    </script>
</body>

</html>